<template>
  <div class="bottom">
    <!-- tab选项卡 -->
    <div id="divtab">
      <el-tabs v-model="activeName" @tab-click="handleClick" id="shangpintab">
        <!-- 商品详情 -->
        <el-tab-pane label="商品详情" name="first" id="tabspxq">
          <div id="home">
            <div>
              <h5>产品参数</h5>
              <p>
                <span>上市季节：2021年冬季</span>
                <span>货号：440526000</span>
              </p>
              <p>尺码:S M L XL 2XL</p>
            </div>
            <!-- 商品展示 -->
            <div>
              <h4><span></span> 产品展示</h4>
              <table>
                <tr>
                  <td rowspan="3" width="68%">
                    <a href="#">
                      <img
                        style="width: 98%; height: 98%"
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank1/first/591-822/1.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                  <td width="31%">
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank1/other1/196-273/2.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank1/other2/196-273/3.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <a href="#">
                      <img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank1/other3/196-273/4.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>

                <tr>
                  <td rowspan="3" width="68%">
                    <a href="#"
                      ><img
                        style="width: 98%; height: 98%"
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank2/first/591-822/1.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                  <td width="31%">
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank2/other1/196-273/2.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>

                <tr>
                  <td>
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank2/other2/196-273/3.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank2/other3/196-273/4.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>

                <tr>
                  <td rowspan="3" width="68%">
                    <a href="#">
                      <img
                        style="width: 98%; height: 98%"
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank3/first/591-822/1.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                  <td width="31%">
                    <a href="#">
                      <img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank3/other1/196-273/2.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>

                <tr>
                  <td>
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank3/other2/196-273/3.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <a href="#"
                      ><img
                        src="https://www.uniqlo.cn/hmall/test/u0000000027848/model/rank3/other3/196-273/4.jpg"
                        alt=""
                      />
                    </a>
                  </td>
                </tr>
              </table>
            </div>
            <!-- 商品详情 -->
            <div>
              <h4><span></span>商品详情</h4>
              <table>
                <tr>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/1.jpg"
                      alt=""
                    />
                  </td>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/2.jpg"
                      alt=""
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/3.jpg"
                      alt=""
                    />
                  </td>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/4.jpg"
                      alt=""
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/7.jpg"
                      alt=""
                    />
                  </td>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/8.jpg"
                      alt=""
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/9.jpg"
                      alt=""
                    />
                  </td>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/10.jpg"
                      alt=""
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/11.jpg"
                      alt=""
                    />
                  </td>
                  <td>
                    <img
                      style="width: 95%; height: 95%"
                      src="https://www.uniqlo.cn/hmall/test/u0000000027848/detail/393/6.jpg"
                      alt=""
                    />
                  </td>
                </tr>
              </table>
            </div>
            <div>
              <img
                style="width: 100%"
                src="https://img.alicdn.com/imgextra/i3/196993935/O1CN01Z0KkqJ1ewHAkBFBGC_!!196993935.jpg"
                alt=""
              />
            </div>
          </div>
        </el-tab-pane>
        <!-- 商品评价 -->
        <el-tab-pane label="商品评价" name="second" id="tabsppj">
          <h2>商品评论</h2>
          <div class="thingspl">
            <img
              :src="pic"
              alt=""
              style="
                width: 40px;
                height: 40px;
                border: 1px solid #fff;
                border-radius: 50%;
                margin-right: 10px;
              "
            />
            <textarea
              name=""
              v-model="product_detail"
              id=""
              cols="100"
              rows="2"
              placeholder="开始评论吧~"
              style="margin-right: 10px"
            ></textarea>
            <button class="btpl1" @click="fabiaopl()">发表评论</button>
          </div>
          <div class="pllb">
            <ul style="width: 800px">
              <li
                style="
                  position: relative;
                  display: flex;
                  padding-bottom: 10px;
                  margin-top: 10px;
                  border-bottom: 1px solid #999;
                "
                v-for="products in temps"
                :key="products.goods_id"
              >
                <img
                  :src="products.user_pic"
                  alt=""
                  style="
                    width: 50px;
                    height: 50px;
                    margin-right: 30px;
                    border: 1px solid #999;
                    border-radius: 50%;
                  "
                />
                <div>
                  <a href="">{{ products.user_name }}</a>
                  <p style="font-size: 15px">{{ products.product_detail }}</p>
                  <h6 style="width: 300px">{{ products.product_data }}</h6>
                </div>
                <div class="aixinya">
                  <span
                    class="fa fa-heart"
                    @click="showcolor(products)"
                    :style="{ color: products.color }"
                  ></span>
                  <span>{{ products.like_count }}</span>
                </div>
              </li>
            </ul>
            <img src="" alt="" />
          </div>
        </el-tab-pane>
        <!-- 购买咨询 -->
        <el-tab-pane label="购买咨询" name="third" id="tabgmzx">
          <div id="messages">
            <h4>
              <span
                ><svg
                  t="1633520030822"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2439"
                  width="16"
                  height="16"
                >
                  <path
                    d="M821.333333 800H547.584l-86.464 96.074667a32 32 0 1 1-47.573333-42.816l96-106.666667A32 32 0 0 1 533.333333 736h288a53.333333 53.333333 0 0 0 53.333334-53.333333V234.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333334v448a53.333333 53.333333 0 0 0 53.333334 53.333333h138.666666a32 32 0 0 1 0 64H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V234.666667c0-64.8 52.533333-117.333333 117.333334-117.333334h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333334v448c0 64.8-52.533333 117.333333-117.333334 117.333333zM704 341.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM512 512a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h192z"
                    p-id="2440"
                  ></path></svg
              ></span>
              我要咨询
            </h4>
            <textarea
              name="咨询"
              maxlength="200"
              placeholder="请输入您要咨询的问题"
              style="width: 100%; height: 200px"
            ></textarea>
            <button
              style="
                width: 100px;
                height: 40px;
                background-color: #fff;
                position: relative;
                right: -87%;
                top: 4%;
              "
            >
              提交
            </button>
            <div style="width: 100%; height: 500px"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detailsbottom",
  data() {
    return {
      activeName: "first",
      datas: [],
      product_detail: "",
      product_data: "",
      temps: [],
      newDatas: [],
      userId: [],
      userInfo: [],
      pic: "",
      pic1: "",
      commState: 1,
    };
  },
  watch: {
    commState: function () {
      this.$axios
        .get("/api/users/viewconm", {
          params: {
            goods_id: this.product[0].goods_id,
          },
        })
        .then((res) => {
          this.temps = res.data.results;
          this.temps.forEach((item) => {
            console.log(item);
            this.userId.push(item.user_id);
            if (item.user_pic == null || item.user_pic == "") {
              item.user_pic = require("../assets/small_log.jpg");
            } else {
              item.user_pic = "http://localhost:3000/images/" + item.user_pic;
            }
          });
          this.$axios
            .get("/api/users/viewuserconm", {
              params: {
                user_id: localStorage.getItem("user_id"),
              },
            })
            .then((res) => {
              this.newDatas = res.data.results;
              this.newDatas.forEach((item1) => {
                this.temps.forEach((item) => {
                  if (item.product_comm_id == item1.product_comm_id) {
                    item.color = "red";
                  }
                });
              });
            });
        });
    },
  },
  methods: {
    showcolor(products) {
      if (localStorage.getItem("token")) {
        if (products.color == "black") {
          products.color = "red";
          products.like_count++;
          this.$axios
            .post("/api/users/comaddcolor", {
              user_id: localStorage.getItem("user_id"),
              product_comm_id: products.product_comm_id,
              color: products.color,
            })
            .then((res) => {})
            .catch((err) => {
              console.log("err", err);
            });
        } else {
          products.color = "black";
          products.like_count--;
          this.$axios.post("/api/users/delcomcolor", {
            user_id: localStorage.getItem("user_id"),
            product_comm_id: products.product_comm_id,
          });
        }
        this.$axios.get("/api/users/getcomnColor", {
          params: {
            product_comm_id: products.product_comm_id,
            color: products.color,
            like_count: products.like_count,
          },
        });
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    fabiaopl() {
      if (this.product_detail == "") {
        alert("评论不能为空");
      } else {
        let now = new Date().getTime();
        this.product_data = this.$moment(now).format("YYYY-MM-DD h:mm:ss");
        this.$axios.post("/api/users/addconm", {
          user_id: localStorage.getItem("user_id"),
          user_name: this.userInfo[0].user_name,
          user_pic: this.userInfo[0].user_pic,
          goods_id: this.product[0].goods_id,
          product_detail: this.product_detail,
          product_data: this.product_data,
        });
        this.product_detail = "";
        this.commState += 1;
      }
    },
  },

  created() {
    this.$bus.$on("results", (res) => {
      this.product = res;
      this.$axios
        .get("/api/users/viewconm", {
          params: {
            goods_id: this.product[0].goods_id,
          },
        })
        .then((res) => {
          this.temps = res.data.results;
          this.temps.forEach((item) => {
            if (item.user_pic == null || item.user_pic == "") {
              item.user_pic = require("../assets/small_log.jpg");
            } else {
              item.user_pic = "http://localhost:3000/images/" + item.user_pic;
            }
          });
          this.$axios
            .get("/api/users/viewuserconm", {
              params: {
                user_id: localStorage.getItem("user_id"),
              },
            })
            .then((res) => {
              this.newDatas = res.data.results;
              this.newDatas.forEach((item1) => {
                this.temps.forEach((item) => {
                  if (item.product_comm_id == item1.product_comm_id) {
                    item.color = "red";
                  }
                });
              });
            });
        })
        .catch((err) => {
          console.log("err", err);
        });
    });

    this.$axios
      .get("/api/users/getUserInfo", {
        params: {
          user_id: localStorage.getItem("user_id"),
        },
      })
      .then((res) => {
        this.userInfo = res.data.results;
        console.log("res.data", this.userInfo[0].user_pic);
        if (this.userInfo[0].user_pic == null || this.userInfo[0].user_pic == "") {
          this.pic = require("../assets/small_log.jpg");
        } else {
          this.pic =
            "http://localhost:3000/images/" + this.userInfo[0].user_pic;
        }
      })
      .catch((err) => {
        console.log("err", err);
      });
  },
};
</script>

<style>
.aixinya {
  position: absolute;
  top: 26px;
  right: 30px;
}
.bottom {
  width: 90%;
  height: 100%;

  margin: 0 auto;
  margin-top: 20px;
  display: flex;
}
.bottom #divtableft {
  flex: 2.3;
  margin-top: 45px;
}
.bottom #divtab {
  flex: 7.7;
}
/* 导航条样式 */
.bottom #shangpintab {
  width: 100%;
  /* margin-left: 29%; */
}
#divtab .el-tabs__item.is-active {
  color: #000;
}
#divtab .el-tabs__active-bar {
  height: 3px;
  background-color: #378694;
}
#divtab element.style {
  width: 357px;
}
#divtab .el-tabs__item {
  width: 233%;
  height: 48px;
  text-align: center;
  padding: 0;
  padding-right: 20%;
}
#tabspxq {
  display: flex;
}
#tabspxq #home {
  flex: 8.7;
}
#tabspxq #homeright {
  flex: 1.3;
}
/* 商品详情样式 */
.bottom #home,
.bottom #profile,
.bottom #messages {
  margin: auto 20px;
}

.bottom #home > div:nth-child(1) {
  width: 100%;
  height: 150px;
  border: #999 solid 1px;
}
.bottom #home > div:nth-child(1) h5,
.bottom #home > div:nth-child(1) p {
  margin-top: 20px;
  margin-bottom: 20px;
}
.bottom #home > div:nth-child(1) p span:nth-child(2) {
  margin-left: 17%;
}
.bottom #home > div:nth-child(2) h4 span,
.bottom #home > div:nth-child(3) h4 span {
  display: inline-block;
  background-color: red;
  width: 5px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  top: 6px;
}
.bottom #home > div:nth-child(2) table,
.bottom #home > div:nth-child(3) table {
  border-collapse: collapse;
  width: 100%;
}
.bottom #home > div:nth-child(2) table td,
.bottom #home > div:nth-child(3) table td {
  border: 1px solid #ccc;
  text-align: center;
}

.bottom #home > div:nth-child(3) table td {
  width: 50%;
  height: 400px;
  text-align: center;
}
/* 商品详情右边 */
#homeright {
  width: 100%;
  height: 180px;
  background-color: rgb(192, 186, 186);
  text-align: center;
}
#homeright li {
  margin-top: 10px;
}
#homeright a {
  font-size: 13px;
}
.btpl1 {
  padding-left: 10px;
  width: 50px;
  height: 50px;
  background-color: rgb(47, 166, 245);
  border: 1px solid #00f;
  border-radius: 10%;
  margin: 0 auto;
  text-align: center;
}
.thingspl {
  width: 790px;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
}
.pllb ul {
  margin: 0 auto;
  /* text-align: center; */
  margin-top: 30px;
}
</style>